<template>
  <div class="box">
    <div style="text-align: right" class="condition"  v-if="getUser">
      <div>
        <el-button type="warning" @click="add(null)">新增传感器</el-button>
      </div>
      <div>
        <el-button type="success" @click="daochu">
          <xslx ref="xslx" />导出</el-button
        >
      </div>
      <div><el-button type="primary" @click="printJson1">打印</el-button></div>
      <!-- <div>
        <input type="file" @change="onFileChange" style="color:#ccc" />
        <button @click="uploadFile">导入</button>
      </div> -->
      <div>
        <el-button @click="Import" type="warning" style="margin-left: 15px"
          >导入</el-button
        >
        <el-button @click="DelBibao" type="danger">删除传感器表</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        :header-cell-style="{
          background: 'rgb(40,103,185)',
          color: 'white',
          borderColor: 'rgb(43,88,144)',
          'text-align': 'center',
        }"
        :cell-style="{ 'text-align': 'center' }"
        height="700"
        style="width: 100%; padding: 0; height: 700px"
      >
        <el-table-column prop="factoryNum" label="传感器出厂编号" width="">
        </el-table-column>
        <el-table-column prop="sensorStyle" label="传感器类型" width="">
        </el-table-column>
        <el-table-column prop="coefficient_01" label="一次系数" width="">
        </el-table-column>
        <el-table-column prop="coefficient_02" label="二次系数" width="">
        </el-table-column>
        <el-table-column prop="intercept" label="截距" width="">
        </el-table-column>
        <el-table-column prop="factoryWavelength_01" label="出厂波长1" width="">
        </el-table-column>
        <el-table-column prop="factoryWavelength_02" label="出厂波长2" width="">
        </el-table-column>
        <el-table-column prop="factoryWavelength_03" label="出厂波长3" width="">
        </el-table-column>
        <el-table-column prop="factoryWavelength_04" label="出厂波长4" width="">
        </el-table-column>
        <el-table-column prop="tempCoefficient" label="温补系数" width="">
        </el-table-column>
        <el-table-column prop="tempIntercept" label="温补初值" width="">
        </el-table-column>
        <el-table-column prop="physicalChannel" label="物理通道" width="">
        </el-table-column>
        <el-table-column label="操作" v-if="getUser">
          <template slot-scope="scope">
            <el-button @click="add(scope.row)" size="small">修改</el-button>
            <el-button
              @click="delClick(scope.row.ID)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </template>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-table-column>
      </el-table>
      <div
        class="block"
        style="width: 100%; text-align: center; margin-top: 10px"
      >
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="currentPage4"
          :page-sizes="[pageSize]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    <add-edit ref="addedit" />
  </div>
</template>
      
      <script>
import xslx from "../../components/xslx.vue";
import AddEdit from "./AddEdit/add_and_xiu_chuanganqiliebiao.vue";
import {
  dingbanchuanganqibiao,
  dingbanchuanganqibiaoshanchu,
  dingbanchuanganqibiadaoru,
  dingbanchuanganqibiadaodelquanbu,
} from "../../https/api/user";
export default {
  components: { xslx, AddEdit },
  data() {
    return {
      pageSize: 11,
      currentPage: 1,
      currentPage4: 1,
      tableData: [],
      riqi: "",
      input: "",
      dialogVisible: false,
      getUser: ''
      // selectedFile: null,
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.ChuanGanQiBiao();
    this.getUser = localStorage.getItem('User') == 'user' ? false : true

  },
  methods: {
    handleSizeChange1(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    handleSizeChange(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    Import() {
      dingbanchuanganqibiadaoru().then((res) => {
        console.log("导入传感器表", res);
        this.tableData = res;
      });
    },
    DelBibao() {
      this.$confirm('是否删除全部传感器表内容')
        .then(_ => {
          // console.log("删除", x);
        
          dingbanchuanganqibiadaodelquanbu().then((res) => {
            if (res) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
            this.ChuanGanQiBiao();
          });
        })
        .catch(_ => { });
      
    },
    // onFileChange(e) {
    //   this.selectedFile = e.target.files[0];
    // },
    // uploadFile() {
    //   const formData = new FormData();
    //  console.log('12121',this.selectedFile);
    //   formData.append('file', this.selectedFile,);

    //   dingbanchuanganqibiadaoru(formData)

    //   .then(response => {
    //     console.log('导入',response);
    //   })
    //   .catch(error => {
    //     console.error(error);
    //   });
    // },

    loadAll() {
      return this.tableData;
    },
    printJson1() {
      printJS({
        // printable: this.tableData,
        type: "json",
        // properties: ["传感器出厂编号", "传感器类型", "一次系数","二次系数","截距","出厂波长1","出厂波长2","出厂波长3","出厂波长4","温补系数","物理通道",],
        header:
          '<span style="text-align:right;" class="custom-h3" ">操作人签字_________</span><span style="text-align:right;  class="custom-h3">负责人签字_________</span><span style="text-align:right;" class="custom-h3">操作员签字_________</span>',
        style: ".custom-h3 { color: black; }",
        documentTitle: "传感器列表",
        printable: this.tableData, //this.list是从后台接口获取的数据，未展示
        maxWidth: 1200,
        properties: [
          { field: "factoryNum", displayName: "传感器出厂编号" },
          { field: "sensorStyle", displayName: "传感器类型" },
          { field: "coefficient_01", displayName: "一次系数" },
          { field: "coefficient_02", displayName: "二次系数" },
          { field: "intercept", displayName: "截距" },
          { field: "factoryWavelength_01", displayName: "出厂波长1" },
          { field: "factoryWavelength_02", displayName: "出厂波长2" },
          { field: "factoryWavelength_03", displayName: "出厂波长3" },
          { field: "factoryWavelength_04", displayName: "出厂波长4" },
          { field: "tempCoefficient", displayName: "温补系数" },
          { field: "physicalChannel", displayName: "物理通道" },
        ],
        // type: "json",
        // header: "传感器列表",
        // // style:'dadsd'
        // showModal: true,
        // documentTitle: "",
        // // gridStyle: "border: 1px solid red; margin-bottom: -1px;",
        // // gridHeaderStyle:'font-weight: 900;',
        // headerStyle: "font-weight: 500;",
        // style:'sssssssssssssssssssss'
      });
    },
    daochu() {
      const data = [
        [
          "传感器出厂编号",
          "传感器类型",
          "一次系数",
          "二次系数",
          "截距",
          "出厂波长1",
          "出厂波长2",
          "出厂波长3",
          "出厂波长4",
          "温补系数",
          "温补初值",
          "物理通道",
        ],
      ];
      this.tableData.forEach((item) => {
        data.push([
          item.factoryNum,
          item.sensorStyle,
          item.coefficient_01,
          item.coefficient_02,
          item.intercept,
          item.factoryWavelength_01,
          item.factoryWavelength_02,
          item.factoryWavelength_03,
          item.factoryWavelength_04,
          item.tempCoefficient,
          item.tempIntercept,
          item.physicalChannel,
        ]);
      });

      this.$refs.xslx.xslx(data);
    },
    // 列表
    ChuanGanQiBiao() {
      dingbanchuanganqibiao().then((res) => {
        this.tableData = res;
      });
    },
    add(data) {
      // 打开对话框方法，接收表单数据，如果数据为null则新增否则为编辑
      this.$refs.addedit.show(data);
    },
    tuichu() {
      this.Isshow = false;
    },
    delClick(x) {
      // console.log(x);
      this.$confirm('是否删除这条数据？')
        .then(_ => {
          // console.log("删除", x);
          const data = {
            id: x,
          };
          dingbanchuanganqibiaoshanchu(data).then((res) => {
            if (res) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
            this.ChuanGanQiBiao();
          });
        })
        .catch(_ => { });

      const data = {
        id: x,
      };
      dingbanchuanganqibiaoshanchu(data).then((res) => {
        if (res) {
          alert("删除成功");
        }
        this.ChuanGanQiBiao();
      });
    },
  },
};
</script>
      
    <style  lang="less"scoped>
.box {
  width: 100%;
  padding: 0 20px;
  .condition {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    > div:nth-child(1) {
      color: white;
      margin-left: 20px;
      background-color: rgb(242, 148, 85);
    }
    > div:nth-child(2) {
      color: white;
      margin-left: 20px;
    }
    > div:nth-child(3) {
      color: white;
      margin-left: 20px;
    }
  }
  .table {
    width: 100%;
    height: 750px;
    margin-top: 10px;
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  // padding: 20px !important;
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
::v-deep .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}
.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}
/deep/.el-table td.el-table__cell {
  border-bottom: none !important;
}
/* 取消el-table鼠标移入高亮 */
div /deep/ .el-table tbody tr:hover > td {
  background: #ccc !important;
}
div /deep/ .el-table tbody tr {
  pointer-events: none;
}
</style>